<!--
 * @description  : 问题卷烟登记组件
 * @descriptionDetail: 问题卷烟登记组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-12 18:43:02
-->
<template>
  <view class="page">
    <theme-navbar :isWhite="false" title="问题卷烟登记" :customBack="handlerBack">
      <view class="nav-right-icon" v-if="!isDisabled" @click="confirmBtn">
        确定
      </view>
    </theme-navbar>
    <u-form :model="cigarForm" style="padding: 0px 10px;" ref="uForm" :error-type="['border-bottom', 'message',]">
      <u-form-item label="卷烟名称" prop="productName" :label-width="180">
        <u-input input-align="right" :custom-style="valueStyle" :disabled="true" v-model="cigarForm.productName" />
      </u-form-item>
      <u-form-item label="卷烟条码" prop="packCode" :label-width="180">
        <u-input input-align="right" :custom-style="valueStyle" :disabled="true" v-model="cigarForm.packCode" />
      </u-form-item>
      <u-form-item required label="数量(条)" prop="qty" :label-width="180">
        <u-input input-align="right" type="digit" :custom-style="valueStyle" :disabled="isDisabled" placeholder="请输入数量" v-model="cigarForm.qty" />
      </u-form-item>
      <u-form-item required label="来源" prop="cigSourceName" :label-width="180" right-icon="arrow-right" ref="changeRefCigSour">
        <u-input input-align="right" :needValid="true" :custom-style="pointerStyle" placeholder="请选择来源" :disabled="true" v-model="cigarForm.cigSourceName" @tap="handlerSelect" />
      </u-form-item>
      <u-form-item label="备注" prop="remark" :label-width="180">
        <u-input input-align="right" type="textarea" :custom-style="valueStyle" :disabled="isDisabled" v-model="cigarForm.remark" />
      </u-form-item>
    </u-form>
    <u-select :list="cigarSourceDict" v-model="cigarSourceShow" @confirm="hanlderChangeCigarSource"></u-select>
  </view>
</template>

<script>
export default {
  props: {
    cigarData: {
      type: Object,
      default: () => {},
    },
    isDisabled: {   // 是否可编辑
      type: Boolean,
      default: false,
    },
  },
  data(){
    return {
      valueStyle: {
        marginRight: "5px",
      },
      cigarForm:{
        productUuid: "",
        productName: "",
        packCode: "",
        qty: "",
        cigSource: "",
        cigSourceName: "",
        remark: "",
      },
      rules:{
        // 数量
        qty: [{
          required: true,
          message: '请输入数量(条)',
          trigger: ['change', 'blur',],
        },],
        cigSourceName:[{
          required: true,
          message: '请选择来源',
          trigger: ['change', 'blur',],
        },],
      },
      cigarInfo: this.cigarData,  // 卷烟信息
      cigarSourceShow: false,
      cigarSourceDict: [],  // 来源字典数据
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
			pointerStyle: {
			  marginRight: "5px",
				pointerEvents: "none !important"
			},
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
    }
  },
  onReady() {
    this.$refs.uForm && this.$refs.uForm.setRules(this.rules);
  },
  mounted() {
    this.$refs.uForm.setRules(this.rules);
  },
  created() {
    console.log("卷烟", this.cigarData);
    Object.assign(this.cigarForm, this.cigarInfo, );
    this.cigarSourceDict = this.$store.state.dicts['M_PROBLEM_CIG_SOURCE'];
  },
  methods:{  
    handlerSelect() {
      !this.isDisabled && (this.cigarSourceShow = true);
    },
    // 选择计划类型
    hanlderChangeCigarSource(p) {
      this.cigarForm.cigSource = p[0].value;
      this.cigarForm.cigSourceName = p[0].label;
    },
    // 确认事件
    confirmBtn(){
      this.$refs.uForm.validate(valid => {
        if (valid) { 
          this.$emit("back", this.cigarForm);
          console.log('表单验证通过');
        }
      });     
    },
    handlerBack() {
      this.$emit("back", null);
    },
  },
}
</script>

<style lang="scss" scoped>
@import "@/style/common/rightMenu.scss";
</style>
